<template>
  <el-dialog v-model="dialogVisible" title="拆箱明细" width="1200px">
    <el-table ref="multipleTable" :data="unBoxList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="40" />
      <el-table-column type="index" width="40" />
      <el-table-column align="left" label="存货编码" width="280">
        <template #default="scope">
          <p style="margin: 0px">编码：{{ scope.row.invcode }}</p>
          <p style="margin: 0px; font-weight: 600">
            名称：{{ scope.row.invname }}
          </p>
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        label="规格型号"
        prop="invspec"
        width="120"
      />
      <el-table-column
        align="left"
        label="批次号"
        prop="invbatch"
        width="180"
      />
      <el-table-column
        align="left"
        label="条码类型"
        prop="barcodeType"
        width="180"
      />
      <el-table-column align="left" label="拆箱数" width="150">
        <template #default="scope">
          <p style="margin: 0px; font-weight: 600; color: #3300ff">
            {{ scope.row.xcQty }} {{ scope.row.measName }}
          </p>
        </template>
      </el-table-column>
      <el-table-column align="left" label="仓库" prop="whName" width="180" />
      <el-table-column align="left" label="创建信息" width="220">
        <template #default="scope">
          <p style="margin: 0px; font-weight: 600; color: #003366">
            {{ scope.row.createUser }}
          </p>
          <p style="margin: 0px; font-weight: 600; color: #003399">
            {{ scope.row.createTime }}
          </p>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button plain type="primary" @click="toPrintUnBox">
        <vab-icon icon="printer-line" />
        打印
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
  import { getUnboxBarcodeApi } from '@/api/kc/barcode_xc'
  import hiPrint from '@/utils/hiPrint.js'
  const dialogVisible = ref(false)
  const unBoxList = ref()
  const $baseLoading = inject('$baseLoading')
  const $baseMessage = inject('$baseMessage')
  const selectedRows = ref()

  const openUnBoxDetail = (pkBarcodeRecord) => {
    if (pkBarcodeRecord) {
      dialogVisible.value = true
      showUnBoxDetail(pkBarcodeRecord)
    }
  }

  const showUnBoxDetail = async (pkBarcodeRecord) => {
    const load = $baseLoading()
    try {
      const { code, msg, data } = await getUnboxBarcodeApi({
        pkBarcodeRecord: pkBarcodeRecord,
      })
      if (code === 2000) {
        $baseMessage(msg, 'success')
        unBoxList.value = data
      } else {
        $baseMessage(msg, 'error')
      }
    } finally {
      load.close()
    }
  }
  const handleSelectionChange = (rows) => {
    selectedRows.value = rows
  }
  const toPrintUnBox = () => {
    hiPrint('bar_001', selectedRows.value)
  }

  defineExpose({ openUnBoxDetail })
</script>
